<template>
  <div>
    <el-table
      :data="blogTypeList"
      style="width: 100%;"
    >
      <el-table-column
        label="序号"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="分类名"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="文章数量"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="up(scope.row,scope.$index)" />
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row,scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 10px 0">
      <el-col :span="2" :offset="21">
        <span style="white-space:nowrap;">文章总数: {{ sumBlog }}</span>
      </el-col>
    </el-row>
    <el-row style="margin: 10px 10px 0 10px;padding: 20px 0 ; border-top: 1px solid #dfe6ec;">
      <el-col :span="24" style="margin: 0 10px 0 0; padding: 0 0 20px 0; color:#909399;font-weight: 700;">
        <span style="margin-left: 9px;">添加分类</span>
      </el-col>
      <el-col :span="5">
        <el-input v-model="createBlogType.name" placeholder="请输入分类名">
          <template slot="prepend">分类名称</template>
        </el-input>
      </el-col>
    </el-row>
    <div style="margin: 50px 0 0 20px;">
      <el-button type="success" @click="submitType">添加分类</el-button>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="分类信息" :visible.sync="dialogFormVisible" @close="colses">
      <el-form :model="blogType">
        <el-form-item label="分类名" :label-width="formLabelWidth">
          <el-input v-model="blogType.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文章数量" :label-width="formLabelWidth">
          <el-input v-model="blogType.sum" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Post_requset } from '@/api/publicRequest'
import { apiDelBlogType, apiAddBlogType, apiUpBlogType } from '@/routerConfig'
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dialogFormVisible: false,
      blogTypeList: [],
      blogType: {
        _id: '',
        name: '',
        sum: 0
      },
      oBlogType: {},
      createBlogType: {
        name: '',
        sum: 0
      },
      sumBlog: 0,
      isup: false,
      index: 0
    }
  },
  async beforeMount() {
    await this.getTypeList()
  },
  computed: {
    ...mapGetters(['blogTypeLists'])
  },
  methods: {
    up(row, index) {
      this.index = index
      this.dialogFormVisible = true
      this.oBlogType = { ...row }
      this.blogType = row
    },
    async del(row, index) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (row.sum > 0) {
          Message.error('删除失败，不能删除文章数量大于0的分类')
          return
        }
        const { data } = await Post_requset(apiDelBlogType, { _id: row._id })
        if (typeof data !== 'string') {
          if (data) {
            Message.success('删除成功')
            this.blogTypeList.splice(index, 1)
          } else Message.error('删除失败')
        } else {
          Message.error(data)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    colses() {
      if (!this.isup) this.unSubimt()
      this.isup = false
    },
    unSubimt() {
      for (const p in this.oBlogType) {
        this.blogType[p] = this.oBlogType[p]
      }
    },
    async submit() {
      if (this.blogType.name === this.oBlogType.name && this.blogType.sum === this.oBlogType.sum) {
        Message.success('无需提交修改')
      } else {
        const { data } = await Post_requset(apiUpBlogType, {
          name: this.blogType.name,
          sum: this.blogType.sum,
          _id: this.blogType._id
        })
        if (typeof data !== 'string') {
          Message.success('修改成功')
          this.getTypeList()
        } else {
          Message.error(data)
        }
      }
      this.dialogFormVisible = false
    },
    async submitType() {
      const reuslt = await Post_requset(apiAddBlogType, {
        typeString: this.createBlogType.name
      })
      if (typeof reuslt.data !== 'string') {
        this.blogTypeList.push(reuslt.data)
        Message.success('添加成功')
      } else {
        Message.error(reuslt.data)
      }
      this.createBlogType.name = ''
    },
    async getTypeList() {
      this.sumBlog = 0
      // const { data } = await get_requset(apiHomBlogType)
      await this.$store.dispatch('banner/getBlogType')
      const data = this.blogTypeLists
      data.map((itme) => {
        this.sumBlog += itme.sum
      })
      this.blogTypeList = data
    }
  }

}
</script>

<style>

</style>
